// web/src/components/learn/navbar-routes.tsx
'use client';
import React from 'react';
import UserButton from "@/features/auth/components/user-button";
import {usePathname, useRouter} from "next/navigation";
import {Button} from "@/components/ui/button";
import {LogOut} from "lucide-react";
import Link from "next/link";
import SearchInput from '@/components/learn/search-input';
// import UserButton from "@/components/auth/user-button";

const NavbarRoutes = () => {
    const pathname = usePathname()
    const router = useRouter()

    const isTeacherPage = pathname?.replaceAll('/learn', '').startsWith('/teacher')
    const isCoursePage = pathname?.replaceAll('/learn', '').includes('/courses')
    const isSearchPage = pathname === '/learn/search'

    return (
        // m auto 自动撑开
        <>
            {isSearchPage && (
                <div className={`hidden md:block`}>
                    <SearchInput/>
                </div>
            )}
            <div className={`flex items-center gap-x-2 ml-auto`}>
                {isTeacherPage || isCoursePage ? (
                    <Link href={`/learn`}>
                        <Button size={'sm'} variant={'ghost'}>
                            <LogOut className={`size-4 mr-2`}/>
                            Exit
                        </Button>
                    </Link>
                ) : (
                    <Link href={`/learn/teacher/courses`}>
                        <Button size={'sm'} variant={'ghost'}>
                            Teacher mode
                        </Button>
                    </Link>
                )}
                <UserButton/>
            </div>
        </>
    );
};

export default NavbarRoutes;